<template>
  <!-- 用户管理 -->
  <div class="user">
    <div class="main">
      <div class="header">
        <el-form :inline="true">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="findUser.username"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker
              v-model="findUser.createTime"
              type="datetime"
              placeholder="请选择"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findUserWith">查询</el-button>
            <el-button @click="replace">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="handleDeleteUsers">
              <el-icon><Minus /></el-icon>
              <span>批量删除</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="body">
        <el-table
          row-key="id"
          stripe
          :data="userList"
          v-if="userList.length > 0"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="头像" width="120">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column
            label="邮箱"
            prop="userEmail"
            width="165"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="发表评论数" prop="commentCount"></el-table-column>
          <el-table-column label="点赞次数" prop="likeCount"></el-table-column>
          <el-table-column label="状态" prop="status">
            <template #default="scope">
              <span
                :class="scope.row.status === 0 ? 'blur' : 'red'"
                @click="update(scope.row.status === 0 ? 1 : 0, scope.row.id)"
              >
                {{ scope.row.status === 0 ? '解冻' : '冻结' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="danger" :text="true" @click="deleteByIds(scope.row.id)"
                >删除</el-button
              >
              <el-button type="primary" :text="true">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else></el-empty>
      </div>
      <div class="page">
        <el-pagination
          v-model="findUser.page"
          v-model:page-size="findUser.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Minus } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getUserListService, deleteBatch, updateStatus } from '@/api/User'
import { ElMessage, ElMessageBox } from 'element-plus'

const loadingValue = ref(false)

const findUser = ref({
  page: 1,
  pageSize: 9,
  username: '',
  createTime: '',
})

const total = ref(null)
const userList = ref([])

const userIdList = ref([])

const deleteByIds = (id) => {
  userIdList.value.push(id)
  deleteBatchUsers(userIdList.value).then(() => {
    userIdList.value = []
  })
}
const handleSelectionChange = (row) => {
  const obj = JSON.parse(JSON.stringify(row))
  userIdList.value = []
  obj.forEach((item) => {
    userIdList.value.push(item.id)
  })
}
const handleDeleteUsers = () => {
  if (userIdList.value.length === 0) {
    ElMessage.error('未选中任何数据')
  } else {
    ElMessageBox.confirm(`您确认删除这${userIdList.value.length}条用户数据吗？`, 'Warning', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }).then(() => {
      deleteBatchUsers(userIdList.value)
    })
  }
}

const update = (status, userId) => {
  const res = updateStatus(parseInt(userId), parseInt(status))
  getUserList(findUser.value)
}

// 分页相关
const handleSizeChange = (pageSize) => {
  findUser.value.pageSize = pageSize
  getUserList(findUser.value)
}
const handleCurrentChange = (page) => {
  findUser.value.page = page
  getUserList(findUser.value)
}
/**
 * 条件查询用户
 */
const findUserWith = () => {
  getUserList(findUser.value)
}
/**
 * 重置
 */
const replace = () => {
  getUserList({
    page: 1,
    pageSize: 9,
    username: '',
    createTime: '',
  })
}
/**
 * 获取用户列表
 * @param obj
 */
const getUserList = async (obj) => {
  const { data } = await getUserListService(obj)
  total.value = data.total
  userList.value = data.records
}
/**
 * 批量删除
 * @param ids
 */
const deleteBatchUsers = (ids) => {
  deleteBatch(ids).then(() => {
    getUserList(findUser.value)
    userIdList.value = []
  })
}

onMounted(() => {
  getUserList(findUser.value)
})
</script>

<style lang="scss" scoped>
.user {
  padding: 15px;
  background-color: #f3f4f5;

  .main {
    min-height: 100vh;
    padding: 20px;
    background-color: #fff;
    border-radius: 7px;

    .header {
      margin-top: 15px;
    }

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}

.blur {
  cursor: pointer;
  color: #37b4fd;
}
.red {
  cursor: pointer;
  color: red;
}

::v-deep.el-table .cell {
  text-align: center !important;
}
</style>